<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <!--
      说明：插值语法一般用于标签体内容（起始标签和结束标签内的内容就是标签体，比如<h2>中的“插值语法”）
      作用：用于解析标签体内容
      写法：{{xxx}}，xxx是js表达式，且可以直接读取data中的所有属性
     -->
    <h2>插值语法</h2>
    <h3>你好, {{name}}</h3>
    <h3>你好, {{school.name}}</h3>
    <hr/>

    <!--
      说明：指令语法一般用于标签属性（比如这里的href）
      作用：用于解析标签（包含标签属性、标签体内容、绑定事件等）
      写法：v-bind:href="xxx"（可简写为:href="xxx"），xxx是js表达式，且可以直接读取data中的所有属性
      注意：Vue中有很多指令语法，不同的指令作用也不同，这里只是通过v-bind进行了解，并不是用这一个指令就能实现所有的作用
    -->
    <h2>指令语法</h2>
    <a v-bind:href="url">百度一下</a>
    <a :href="url">百度一下</a>
    <a :href="school.url">百度一下</a>
    <hr/>
  </div>
</body>

<script type="text/javascript">
  new Vue({
    el: '#root',
    data: {
      name: '张三',
      // name: '李四',  // 如果同级中有同名的属性，那么只会使用最后定义的那个属性的值！
      url: 'https://www.baidu.com',
      school: {
        name: '王五',
        url: 'https://www.hao123.com/'
      }
    }
  })
</script>
</html>